<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Web UI - 菜单+表单</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="stylesheet" type="text/css" href="css/global.css">
        <link rel="stylesheet" type="text/css" href="css/glw.css">
    </head>

    <body>
        <div id="top" class="glb-topbar">
            <div class="glb-layout">
                <ul class="glb-left">
                    <li>
                        <a href="#" target="_blank"><span class="item-ico iconfont icon-home"></span>主页</a>
                    </li>
                    <li>
                        <a href="#" target="_blank"><span class="item-ico iconfont icon-mblog"></span>官方微博</a>
                    </li>
                </ul>
                <ul class="glb-right">
                    <li>你好, 张三丰
                    </li>
                    <li>
                        <a href="#">退出</a>
                    </li>
                    <li>
                        <a href="#">我的蓝桥银行</a>
                    </li>
                    <li class="item-stripe">
                        <a href="#">帮助中心</a>
                    </li>
                    <li class="item-stripe">
                        <a href="#">意见反馈</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="header" class="glb-header">
            <div class="glb-layout">
                <div id="logo" class="glb-logo">
                    <a href="#">
                        <img src="images/logo_w.png" alt="LOGO" />
                    </a>
                </div>
                <div id="nav" class="glb-nav">
                    <ul class="glb-nav-items">
                        <li class="nav-item-uc nav-item-active">
                            <a href="uc.html">
                                <div></div>
                            </a>
                        </li>
                        <li class="nav-item-adv">
                            <a href="adv_list.html">
                                <div></div>
                            </a>
                        </li>
                        <li class="nav-item-setting">
                            <a href="member_information.html">
                                <div></div>
                            </a>
                        </li>
                    </ul>
                    <div class="glb-nav-hover"></div>
                </div>
            </div>
        </div>
        <div class="glb-page">
            <div class="glb-layout">
                <div class="glb-menu">
                    <ul class="glb-menu-items">
                        <li>
                            <a href="#">
                                <span class="menu-ico iconfont icon-advert"></span>
                                <span class="menu-txt">广告管理</span>
                            </a>
                        </li>
                        <li class="menu-current">
                            <a href="#">
                                <span class="menu-ico iconfont icon-money"></span>
                                <span class="menu-txt">交易管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="menu-ico iconfont icon-account"></span>
                                <span class="menu-txt">会员资料</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="menu-ico iconfont icon-account"></span>
                                <span class="menu-txt">会员资料</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="menu-ico iconfont icon-account"></span>
                                <span class="menu-txt">会员资料</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="glb-main">
                    <div class="glb-main-hd">
                        <h3 class="main-title">发布信息</h3>
                        <div class="main-toolbar">
                            <a href="#" class="glb-button glb-btn-primary">发布商品</a>
                        </div>
                    </div>
                    <div class="glb-main-bd">
                        <div class="glb-main-content">
                            <ul class="glb-tabs">
                                <li class="current">
                                    <a class="tab-item" href="#">菜单001</a>
                                </li>
                                <li>
                                    <a class="tab-item" href="#">菜单001</a>
                                </li>
                                <li>
                                    <a class="tab-item" href="#">菜单001</a>
                                </li>
                                <li>
                                    <a class="tab-item" href="#">菜单001</a>
                                </li>
                                <li class="glb-col-right">
                                    <a href="#" class="glb-button glb-btn-default">
                                        <span class="iconfont icon-shop"></span> 刷新
                                    </a>
                                    <a href="#" class="glb-button glb-btn-primary">
                                        <span class="iconfont icon-reviewing"></span> 刷新
                                    </a>
                                </li>
                            </ul>
                            <ul class="glb-search">
                                <li>
                                    <input type="text" class="form-ipt" name="" value="" placeholder="请输入" />
                                </li>
                                <li>
                                    <input type="text" class="form-ipt" name="" value="" placeholder="请输入" />
                                </li>
                                <li>
                                    <dl class="glb-selector" data-max="3">
                                        <dt>状态:</dt>
                                        <dd>
                                            <a class="option" href="javascript:;">
                                                <h6>状态1</h6>
                                                <input class="form-cb" type="checkbox" name="" value="" />
                                            </a>
                                        </dd>
                                        <dd class="on">
                                            <a class="option" href="javascript:;">
                                                <h6>状态1</h6>
                                                <input class="form-cb" type="checkbox" name="" value="" />
                                            </a>
                                        </dd>
                                        <dd>
                                            <a class="option" href="javascript:;">
                                                <h6>状态1</h6>
                                                <input class="form-cb" type="checkbox" name="" value="" />
                                            </a>
                                        </dd>
                                        <dd>
                                            <a class="option" href="javascript:;">
                                                <h6>状态1</h6>
                                                <input class="form-cb" type="checkbox" name="" value="" />
                                            </a>
                                        </dd>
                                    </dl>
                                </li>
                                <li>
                                    <a href="javascript:;" class="glb-button glb-btn-default">重置</a>
                                </li>
                                <li>
                                    <input type="submit" class="glb-button glb-btn-primary" placeholder="请输入" />
                                </li>
                                <li class="glb-col-right">
                                    <a id="alertBtn" href="javascript:;" class="glb-button glb-btn-primary">
                                        <span class="iconfont icon-members"></span> 提示框
                                    </a>
                                </li>
                            </ul>
                            <table class="glb-tables">
                                <thead>
                                    <tr>
                                        <th class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </th>
                                        <th>ID</th>
                                        <th>名称</th>
                                        <th>
                                            <a href="#" class="glb-order-box">日期
                                                <div class="glb-order-arr glb-order-dsc">
                                                    <span class="order-arr-up"></span>
                                                    <span class="order-arr-down"></span>
                                                </div>
                                            </a>
                                        </th>
                                        <th>类型</th>
                                        <th>标题</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </td>
                                        <td>1</td>
                                        <td>
                                            <a href="#">今晚打老虎</a>
                                        </td>
                                        <td>2016-10-17</td>
                                        <td>正常</td>
                                        <td>今天天气真好啊,是吗</td>
                                        <td>
                                            <a href="#">删除</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">查看</a>
                                            <span class="tbs-split">|</span>
                                            <a href="#">设置</a>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <td class="tbs-col-cb">
                                        <input type="checkbox" name="" value="" />
                                    </td>
                                    <td colspan="6">
                                        <div class="glb-left glb-col-left">
                                            <button class="glb-button glb-btn-default">立即设置上传</button>
                                            <button class="glb-button glb-btn-default">删除</button>
                                            <a href="#" class="glb-button glb-btn-default">
                                                <span class="iconfont icon-refresh"></span> 刷新
                                            </a>
                                        </div>
                                        <ul class="glb-right glb-pagination">
                                            <li>
                                                <a href="">1</a>
                                            </li>
                                            <li>
                                                <span>...</span>
                                            </li>
                                            <li>
                                                <a href="">5</a>
                                            </li>
                                            <li>
                                                <a href="">6</a>
                                            </li>
                                            <li>
                                                <a href="">7</a>
                                            </li>
                                            <li>
                                                <a href="">8</a>
                                            </li>
                                            <li class="current">
                                                <a>9</a>
                                            </li>
                                            <li>
                                                <a href="">10</a>
                                            </li>
                                            <li>
                                                <a href="">11</a>
                                            </li>
                                            <li>
                                                <a href="">12</a>
                                            </li>
                                            <li>
                                                <a href="">13</a>
                                            </li>
                                            <li>
                                                <span>...</span>
                                            </li>
                                            <li>
                                                <a href="">24</a>
                                            </li>
                                        </ul>
                                    </td>
                                </tfoot>
                            </table>
                            <table class="glb-tables">
                                <thead>
                                    <tr>
                                        <th class="tbs-col-cb">
                                            <input type="checkbox" name="" value="" />
                                        </th>
                                        <th>ID</th>
                                        <th>名称</th>
                                        <th>
                                            <a href="#" class="glb-order-box">日期
                                                <div class="glb-order-arr glb-order-dsc">
                                                    <span class="order-arr-up"></span>
                                                    <span class="order-arr-down"></span>
                                                </div>
                                            </a>
                                        </th>
                                        <th>类型</th>
                                        <th>标题</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="tbs-col-nodata" colspan="7">
                                            <span class="iconfont icon-data"></span>没有查询到符合条件的记录
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="glb-bottom">
            <div class="glb-layout">
                <div class="glb-left">
                    <ul>
                        <li>
                            <a href="#" target="_blank">关于我们</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">安全保障</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">诚聘英才</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">商户合作</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">新手指南</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">在线客服</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">帮助中心</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">站点地图</a>
                        </li>
                        <li class="last">
                            <a href="#" target="_blank">联系我们</a>
                        </li>
                    </ul>
                    <p>国信世纪人才服务（北京）有限公司</p>
                    <p>蓝桥软件学院</p>
                    <p>Copyright Reserved 2016©蓝桥
                        <a class="beian" href="http://www.miibeian.gov.cn" target="_blank">吉ICP备 2222233444号</a>
                    </p>
                </div>
                <div class="glb-right glb-tac">
                    <img class="weixin-code" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1490252359&di=d9eb73237b5ac949fc8ef5e7c201c0d5&src=http://www.zyue.com/upload/addr/er_20140725105541.png" alt="" />
                    <p class="weixin-text">扫码关注公众号</p>
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/global.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/dialog.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/validate.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {

            $("#showDialog").click(function() {

                Dialogx.show({
                    _url: 'dialog.html',
                    _title: '请输入充值金额'
                });

            });

            $("#submitBtn").click(function() {

                Dialogx.confirm('这是一个提示框', function() {
                    $("#demoForm").submit();
                });

            });

            $("#validateBtn").click(function() {

                $("#demoForm").submit();

            });
            // VALIDATE
            $("#demoForm").validate(rules);

        });

        // form validate rule
        var rules = {

            "f11": {
                tip: "这里是提示信息",
                rule: {
                    required: ["表单为空提示信息"]
                }
            },

            "f12": {
                tip: "这里是提示信息",
                rule: {
                    required: ["表单为空提示信息"],
                    length: ["长度为4-20位提示信息", "4-20"]
                }
            },

            "f21": {
                tip: "这里是提示信息",
                rule: {
                    required: ["表单为空提示信息"],
                    length: ["长度为4-20位提示信息", "4-20"]
                }
            },

            "f31": {
                tip: "这里是提示信息",
                rule: {
                    required: ["表单为空提示信息"]
                }
            },

            "f41": {
                tip: "这里是提示信息",
                rule: {
                    required: ["表单为空提示信息"]
                }

            },

            "f42": {
                tip: "这里是数量提示信息",
                rule: {
                    required: ["数量为空提示信息"],
                    length: ["长度为4-20位提示信息", "4-20"]
                }
            },

            "f43": {
                tip: "这里是价钱信息",
                rule: {
                    required: ["价钱为空提示信息"],
                    length: ["价钱为4-20位提示信息", "4-20"]
                }
            },

            "f71": {
                tip: "选项提示信息",
                rule: {
                    required: ["选项为空提示信息"]
                }
            },

            "f73": {
                tip: "这里是价钱信息",
                rule: {
                    required: ["价钱为空提示信息"],
                    length: ["价钱为4-20位提示信息", "4-20"]
                }
            },

            "f74": {
                tip: "这里是价钱信息",
                rule: {
                    required: ["价钱为空提示信息"],
                    length: ["价钱为4-20位提示信息", "4-20"]
                }
            },

            "f75": {
                tip: "这里是价钱信息",
                rule: {
                    required: ["价钱为空提示信息"],
                    length: ["价钱为4-20位提示信息", "4-20"]
                }
            }

        };
    </script>

</html>